<template>
  <a-skeleton :loading="loading" active :title="false" :paragraph="{ rows: 6, width: '100%' }">
    <a-card title="角色列表" :bordered="false" size="small" hoverable>
      <template #extra>
        <a-button type="primary" size="middle" @click="addRole" v-auth="['admin', 'roles:add']">
          新增
        </a-button>
      </template>
      <a-table
        size="small"
        :columns="columns"
        :data-source="dataSource"
        :pagination="false"
        :scroll="{ x: 800 }"
        :customRow="customRow"
        :rowClassName="setRowClassName"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'operation'">
            <span>
              <a-button
                type="link"
                size="middle"
                @click="editRole(record)"
                :disabled="record.level < level"
                v-auth="['admin', 'roles:edit']"
                >编辑</a-button
              >
              <a-divider type="vertical" />
              <a-popconfirm
                v-if="dataSource.length"
                title="确定删除本条数据吗?"
                @confirm="onDelete(record.id)"
              >
                <a-button
                  type="link"
                  size="middle"
                  :disabled="record.level < level"
                  v-auth="['admin', 'roles:del']"
                  >删除</a-button
                >
              </a-popconfirm>
            </span>
          </template>
        </template>
      </a-table>
      <!--分页组件-->
      <a-pagination
        style="margin-top: 10px"
        size="small"
        v-model:current="page"
        :total="total"
        show-size-changer
        show-quick-jumper
        :show-total="(total) => `共有 ${total} 条数据`"
        @showSizeChange="onShowSizeChange"
        @change="pageChange"
      />

      <RoleModal ref="roleModalRef" />
    </a-card>
  </a-skeleton>
</template>
<script lang="ts">
  import { defineComponent, ref, onMounted, watch } from 'vue';
  import { notification } from 'ant-design-vue';
  import { getRolesApi, delRoleApi, getLevelApi } from '/@/api/role';
  import RoleModal from './roleModal.vue';
  import { reload, customRow, setRowClassName } from './index';

  const columns = [
    {
      title: '名称',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '数据权限',
      dataIndex: 'dataScope',
      key: 'dataScope',
    },
    {
      title: '角色级别',
      dataIndex: 'level',
      key: 'level',
    },
    {
      title: '描述',
      dataIndex: 'description',
      key: 'description',
    },
    {
      title: '创建日期',
      dataIndex: 'createTime',
      key: 'createTime',
    },
    {
      title: '操作',
      key: 'operation',
      fixed: 'right',
      width: 160,
    },
  ];

  export default defineComponent({
    components: {
      RoleModal,
    },
    setup() {
      const loading = ref<boolean>(true);
      const dataSource = ref<any>([]);
      const total = ref<number>(0);
      const page = ref<number>(1);
      const pageSize = ref<number>(10);

      const pageChange = async (current: number) => {
        page.value = current;
      };

      const onShowSizeChange = async (_current: number, size: number) => {
        page.value = 1;
        pageSize.value = size;
      };

      const loadRoles = async () => {
        try {
          let res = await getRolesApi({
            page: page.value - 1,
            size: pageSize.value,
            sort: 'id,desc',
          });
          dataSource.value = res?.content;
          total.value = res?.totalElements;
        } catch (error) {}
      };

      watch([page, pageSize, reload], () => {
        loadRoles();
      });

      const level = ref(3);
      onMounted(async () => {
        setTimeout(async () => {
          loading.value = false;
        }, 300);
        //获取级别数据
        const resLevel = await getLevelApi();
        level.value = resLevel?.level;
        await loadRoles();
      });

      const roleModalRef = ref();
      const addRole = () => {
        roleModalRef.value.open(true, {});
      };

      const editRole = (record) => {
        roleModalRef.value.open(false, { ...record });
      };

      const onDelete = async (id) => {
        try {
          const ids = [id];
          await delRoleApi(ids);

          if (dataSource.value.length == ids.length && page.value > 0) {
            --page.value;
          } else {
            reload.value = !reload.value;
          }
          notification['success']({
            message: '删除成功!',
            duration: 3,
          });
        } catch (error) {}
      };

      return {
        loading,
        page,
        total,
        pageChange,
        onShowSizeChange,
        dataSource,
        columns,
        customRow,
        setRowClassName,
        addRole,
        editRole,
        roleModalRef,
        onDelete,
        level,
      };
    },
  });
</script>
<style lang="less" scoped>
  :deep(.clickRowStyl) {
    background-color: #2a2b2d;
    .ant-table-cell-fix-right {
      background: #2a2b2d;
    }
  }
</style>
